<!-- 申请退款 -->
<template>
	<view class="refund-request page-background">
		<view class="course-item item-box">
			<view class="top-row flex-box">
				<view @click="topClick" class="left flex-box">
					<view class="jlbicon"></view>
					<view class="club-name">
						{{detailInfo.clubName}}
					</view>
					<!-- <van-icon name="arrow" size="15px" color="#CCCCCC" /> -->
					<!-- <image v-if="arrowShow" class="icon-arrow" :src="'@/static/images/icon-arrow.png'|addBaseImgUrl" mode=""></image> -->
				</view>
				<view class="right status">
					<!-- {{status}} -->
				</view>
			</view>
			<view @click="toGoodsDetail" class="course-info flex-box">
				<template v-if="detailInfo.type=='2'">
					<view class="left circle" >
						<image v-if="detailInfo.coachIcon" :src="detailInfo.coachIcon" mode="aspectFill"></image>
						<image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" />
					</view>
				</template>
				<template v-else>
					<view class="left" >
						<image :src="detailInfo.goodsUrl" mode="aspectFill"></image>
						<view class="small" v-if="detailInfo.actType=='2'">
							<view>赛事</view>
						</view>
					</view>
				</template>
				<view class="right">
					<view class="">
						<view class="title-price flex-box">
							<view class="course-title line-clamp-2">
								{{detailInfo.goodsName}}
							</view>
							<view class="course-price">
								￥<text>{{detailInfo.amount}}</text>
							</view>
						</view>
						<view class="place_now line-clamp-1">
							{{detailInfo.spActEnter.placeName?detailInfo.spActEnter.placeName:detailInfo.placeName}}
						</view>
						<view class="huismall" v-if="detailInfo.type=='1'">{{datetit(detailInfo.actStartDate)}} {{week=="1"?'周一':week=="2"?'周二':week=="3"?'周三':week=="4"?'周四':week=="5"?'周五':week=="6"?'周六':week=="0"?'周日':''}} {{detailInfo.actStartTime.slice(0,5)+'-'+detailInfo.actEndTime.slice(0,5)}}</view>
						<view class="jibie" v-if="detailInfo.type=='1'">
							<view class="man">{{'男L'+detailInfo.spActEnter.actLevelStart+'-L'+detailInfo.spActEnter.actLevelEnd}}</view>
							<view class="woman">{{'女L'+detailInfo.spActEnter.actGirlLevelStart+'-L'+detailInfo.spActEnter.actGirlLevelEnd}}</view>
						</view>
						<view class="venue">
							<!-- {{content}} -->
						</view>
					</view>
					<view class="tags flex-box" v-if="detailInfo.type!=='1'">
						<view v-for="(item,index) in (detailInfo.goodsSpec?[detailInfo.goodsSpec]:[])" :key="index" class="lit-tag">
							{{item}}
						</view>
						<view class="langClass flex-box" v-if="detailInfo.type=='2' && classType!=='2'">
							<view class="" v-if="detailInfo.spClassEnter.hourType=='0'">
								{{detailInfo.totalCount}}课时
							</view>
							<view class="" v-if="detailInfo.spClassEnter.hourType=='1'">
								不限课时
							</view>
							<view class="" v-if="detailInfo.classDays&&detailInfo.classDays>0">
								有效期{{detailInfo.classDays}}天
							</view>
						</view>
						<!-- <slot name="btn-row"></slot> -->
					</view>
				</view>
			</view>
		</view>
		<view class="item-box form-area">
			<view class="form-row flex-box">
				<view class="label">
					申请原因
				</view>
				<view @click="showPopup" class="right flex-box">
					<input type="text" placeholder="请选择申请原因" :value="refundTypeName" />
					<van-icon name="arrow-down" size="15px" color="#333333" />
				</view>
			</view>
			<view class="form-row">
				<view class="label">
					说明
				</view>
				<textarea @input="textChange" maxlength="60" :value="remarks" placeholder="请填写说明" />
			</view>
		</view>
		<view @click="submit" class="refund-btn">
			提交
		</view>
		<!-- 下拉选择 -->
		<van-popup :show="popupShow" position="bottom" custom-style="height:55%;padding-top:20rpx;">
			<van-picker :columns="popupData" @cancel="popupCancel" @confirm="popupConfirm" :show-toolbar="true" />
		</van-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		strUtils,
		messageAuth
	} from '@/common/js/util'
	import { rili } from '@/common/js/util.js'
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				remarks: '',
				popupShow: false,
				refundTypeName: '',
				refundType: '',
				popupData: [],
				btnFlag: true,
				week: rili.getweekDay(this.$props.actStartDate)
			};
		},
		onLoad(data) {
			this.id = data.id || ''
			this.init()
			this.getRefundType()
		},
		computed: {
			...mapState(['userInfo', 'accessToken']),
		},
		methods: {
			async init() {
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.getOrderDetail(param, this.id)
				if (res && res.code == 200) {
					this.detailInfo = res.data
				}
			},
			async getRefundType() {
				const res = await this.$api.getDictList({}, 'refundType')
				if (res && res.code == 200) {
					this.refundTypelist = res.data
					let arr = []
					res.data.map((item, index) => {
						arr.push(item.name)
					})
					this.popupData = arr
				}
			},
			textChange(e) {
				let regStr =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
				let a = e.detail.value
				a = a.replace(regStr, '')
				this.remarks = a
			},
			showPopup() {
				this.popupShow = true
			},
			popupCancel() {
				this.popupShow = false
			},
			popupConfirm(e) {
				const checkedObj = this.refundTypelist[e.detail.index]
				this.refundType = checkedObj.code
				this.refundTypeName = checkedObj.name
				this.popupShow = false
			},
			back(){
				this.btnFlag = true
				uni.navigateBack({
					delta: 1
				})
			},
			toGoodsDetail(){
				let obj = this.detailInfo
				let url = ''
				if(obj.type=='2'){
					url = '/course/detail/detail?id=' + obj.classId
				}else if(obj.type=='1'){
					url = '/activity/detail/detail?id=' + obj.actId
				}else{
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			async submit() {
				if(!this.btnFlag){
					return false
				}
				if (!this.refundType) {
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					})
					return false
				}
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					orderId: this.id,
					refundType: this.refundType,
					remarks: this.remarks
				}
				this.btnFlag = false
				const res = await this.$api.orderRefund(param)
				if (res && res.code == 200) {
					messageAuth.requestAuth('SUBMIT_REFUND_REQUEST',this.back)
				}else{
					this.btnFlag = true
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			},
			weeknames(a) {
				let text = '';
				switch (a) {
					case '1':
						text = '周一';
						break;
					case '2':
						text = '周二';
						break;
					case '3':
						text = '周三';
						break;
					case '4':
						text = '周四';
						break;
					case '5':
						text = '周五';
						break;
					case '6':
						text = '周六';
						break;
					case '0':
						text = '周日';
						break;
				}
				return text;
			},
			datetit(a){
				let date = a.split("-");
				return `${date[1]}月${date[2]}日`
			},
			topClick(){
				if(this.arrowShow&&this.clubId){
					uni.navigateTo({
						url: '/mainProcess/club/detail/detail?id='+this.clubId
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.refund-request {
		min-height: 100vh;
		overflow: hidden;
		
		.course-item{
			min-height: 200rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.top-row{
				height: 30rpx;
				.left{
					align-items: center;
					.club-name{
						font-size: 30rpx;
						line-height: 30rpx;
						margin-right: 20rpx;
					}
					.icon-arrow{
						width: 12rpx;
						height: 20rpx;
					}
					.jlbicon{
						width:32rpx;
						height: 32rpx;
						background:url('@/static/images/icon-vipcard-club.png') no-repeat;
						background-size:100% 100%;
						margin-right:12rpx;
					}
				}
				.right{
					color: #FDB42E;
					font-size: 26rpx;
					line-height: 30rpx;
					position: relative;
				}
			}
			.course-info{
				height: 160rpx;
				margin-top: 30rpx;
				align-items: stretch;
				.left{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
					background-color: #F2F2F2;
					border-radius: 15rpx;
					position: relative;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						vertical-align: middle;
						border-radius: 15rpx;
					}
					.small{
						position: absolute;
						left: 0;
						top:0;
						width: 68rpx;
						text-align: center;
						view{
							padding: 0 10rpx;
							background-color: #FDE3DC;
							color: #F77350;
							height: 32rpx;
							line-height: 29rpx;
							border-radius: 5rpx;
							color:#F77350;
							font-size: 24rpx;
						}
					}
				}
				.circle{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				.right{
					width: 544rpx;
					display: flex;
					flex-flow: column;
					// justify-content: space-between;
					.title-price{
						align-items: flex-start;
						.course-title{
							line-height: 38rpx;
							max-width: 340rpx;
						}
						.course-price{
							font-size: 24rpx;
							line-height: 38rpx;
							text{
								font-size: 30rpx;
							}
						}
					}
					.venue{
						font-size: 26rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.tags{
						justify-content: space-between;
						align-items: center;
						.lit-tag{
							margin-top: 13rpx;
						}
						.langClass{
							view{
								color: #FDB42E;
								font-size: 26rpx;
							}
							view:last-child{
								margin-left: 15rpx;
							}
						}
					}
					.place_now{
						font-size: 24rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						max-width: 50%;
					}
					.huismall{
						font-size: 24rpx;
						margin-bottom: 10rpx;
						color: #999999;
					}
					.jibie{
						width: 100%;
						display: flex;
						margin-bottom:20rpx;
						.man{
							background-color:transparent!important;
							border:1px solid #C8DBFF;
							color:#2E87FF!important;
							line-height: 29rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
						.woman{
							background-color:transparent!important;
							border:1px solid #FFC8C3;
							color:#E14806;
							line-height: 29rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
					}
				}
			}
		}
		.form-area {
			padding: 0 20rpx;

			.form-row {
				padding: 30rpx 0;
				align-items: center;

				&+.form-row {
					border-top: 1rpx solid #E9E9E9;
				}

				view {
					line-height: 50rpx;
				}

				.label {
					padding-left: 25rpx;
				}

				.right {
					align-items: center;

					input {
						margin-right: 20rpx;
						pointer-events: none;
						text-align: right;
					}
				}

				textarea {
					width: 100%;
					margin-top: 20rpx;
					border: 1rpx solid #CCCCCC;
					border-radius: 15rpx;
					box-sizing: border-box;
					padding: 20rpx;
				}
			}
		}

		.refund-btn {
			position: fixed;
			bottom: 60rpx;
			width: 690rpx;
			left: 50%;
			margin-left: -345rpx;
			border-radius: 44rpx;
			height: 88rpx;
			background-color: $public-color-blue1;
			color: white;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>

<style>
	.van-picker-column__item {
		line-height: 44px !important;
	}
</style>
